import {
  getInspectionTemplateByPage,
  addInspectionTemplate,
  updateInspectionTemplate,
  delInspectionTemplate,
  exportInspectionTemplate,
  getInspectionType,
  getInspectionTemplateMasterItem,
  getTemplateInspectionItem,
  getInspectionTemplateByNameAndProductType,
  getProductTypeList,
  checkInspectionTemplateByProductAndProcess,
} from '@/services/templateMaintain/inspectionTemplate';
import { getAllProcess } from '@/services/baseData/bopTotal';
import './style.less';
import { Ellipsis } from '@/components/Ellipsis';
import { PlusOutlined, RightCircleFilled } from '@ant-design/icons';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import type { ActionType, ProColumns } from '@ant-design/pro-table';
import ProTable from '@ant-design/pro-table';
import { Button, Form, Input, message, Modal, Row, Col, Select, Tabs, Radio, Checkbox } from 'antd';
import { history } from 'umi';
import { sortTran, filterTran, filterTranNew } from '@/utils/requestUtil';
import React, { useEffect, useRef, useState } from 'react';
import InspectionTemplateMasterItem from '../quality/inspectionTemplateMasterItem';
import TemplateInspectionItem from '../quality/templateInspectionItem';
import dayjs from '@/components/dayjs';
const InspectionTemplate: React.FC<{}> = () => {
  const actionRef = useRef<ActionType>();
  const [modalVisit, setModalVisit] = useState(false); // 新建和编辑提示框
  const [confirmLoading, setConfirmLoading] = useState(false); //编辑框的disable
  const [formTitle, setFormTitle] = useState('新建'); //
  const [createOrUpdate, setCreateOrUpdate] = useState(false); //编辑框的disable
  const [editModalVisit, setEditModalVisit] = useState(false); //模板编辑
  const [modalVisit2, setModalVisit2] = useState(false); // 模板预览
  const [thetype, setthetype] = useState([]); //类别下拉框
  const [optionsProcess, setoptionsProcess] = useState([]); //工序下拉框用到
  const [allProcess, setallProcess] = useState([]); //所有工序
  const [id, setid] = useState(); //跳转自定义表页面
  const [thehead, setthehead] = useState([]); //预览用，保存表头
  const [theitem, settheitem] = useState([]); //预览用，保存项
  const [thetitle, setthetitle] = useState('');
  const [theinspectionMethod, settheinspectionMethod] = useState('');
  const [optionsTypeDesc, setoptionsTypeDesc] = useState([]); //柜体类型
  const [isend, setisend] = useState(false);
  const { TextArea } = Input;
  const [form] = Form.useForm();
  const ref = useRef(null);
  const dateFormat = 'YYYY-MM-DD';
  //类型定义
  type tabType = {
    key: string;
    name: string;
    label: string;
    content: JSX.Element;
  };
  const columns: ProColumns[] = [
    {
      title: '序号',
      dataIndex: 'index',
      valueType: 'index',
      width: 80,
      align: 'center',
      sorter: true,
    },
    {
      title: '模板类型',
      dataIndex: 'type',
      align: 'center',
      sorter: true,

      valueType: 'select',
      request: async () => {
        const gettype = await getInspectionType(null);
        const typeOptionContract: any[] = [];
        gettype?.data.map((item: any) => {
          typeOptionContract.push({ value: item, label: item });
        });
        return typeOptionContract;
      },
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '柜体类型',
      dataIndex: 'productType',
      align: 'center',
      sorter: true,

      valueType: 'select',
      request: async () => {
        const getproduct = await getProductTypeList(null);
        const productOptionContract: any[] = [];
        getproduct.data.map((item: any, index: any) => {
          productOptionContract.push({ value: item, label: item });
        });
        return productOptionContract;
      },
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '模板名称',
      dataIndex: 'name',
      align: 'center',
      sorter: true,

      render: (text) => <>{Ellipsis(text)}</>,
      width: 300,
    },
    {
      title: '工序',
      dataIndex: 'processName',
      align: 'center',
      sorter: true,

      search: false,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '运行状态',
      dataIndex: 'state',
      align: 'center',
      sorter: true,

      search: false,
      render: (text, record, _, action) => {
        return <div>{record.state == '1' ? '已发布' : record.state == '0' ? '未发布' : '-'}</div>;
      },
    },
    // {
    //   title: '版本号',
    //   dataIndex: 'vision',
    // },
    // {
    //   title: '发布日期',
    //   dataIndex: 'publishTime',
    // },
    // {
    //   title: '删除日期',
    //   dataIndex: 'deleteTime',
    // },
    // {
    //   title: '备注',
    //   dataIndex: 'memo',
    // },
    {
      title: '创建人', //表头显示的名称
      search: false,
      dataIndex: 'createName',
      align: 'center',
      sorter: true,
      render: (text) => <>{Ellipsis(text)}</>,
    },
    {
      title: '创建日期', //表头显示的名称
      search: false,
      dataIndex: 'createTime',
      align: 'center',
      sorter: true,
      // render: (text) => <>{Ellipsis(text)}</>,
      render: (text, record, _, action) => {
        return dayjs(record.createTime).format(dateFormat);
      },
    },
    {
      title: '操作',
      valueType: 'option',
      key: 'option',
      fixed: 'right',
      align: 'center',
      render: (text, record, _, action) => [
        <a
          key="editKey"
          onClick={() => {
            // if (record.state!='1'){
            setEditModalVisit(true);
            setCreateOrUpdate(true);
            setid(record.id);
            if (record.type == '过程检验') {
              setisend(true);
            }
            form.setFieldsValue({
              deleteTime: record.deleteTime,
              memo: record.memo,
              name: record.name,
              publishTime: record.publishTime,
              state: record.state,
              type: record.type,
              vision: record.vision,
              id: record.id,
              productType: record.productType,
              processName: record.processName,
            });
            // }
          }}
        >
          {record.state == '1' ? '' : '修改'}
        </a>,
        <a
          key="reviewKey"
          onClick={async () => {
            const result1 = await getInspectionTemplateMasterItem(record.id); //表头
            // 按照sortId排序
            bubbleSort(result1?.data).then((result) => {
              // console.log('result:', result);
              setthehead(result);
            });
            const result2 = await getTemplateInspectionItem(record.id); //检验项
            bubbleSort(result2?.data).then((result) => {
              // console.log('result:', result);
              settheitem(result);
            });
            setthetitle(record.name);
            setModalVisit2(true);
          }}
        >
          预览
        </a>,
        <a
          key="deleteKey"
          onClick={() => {
            Modal.confirm({
              title: '删除',
              content: '确定要删除吗',
              okText: '确认',
              cancelText: '取消',
              onOk: async () => {
                await delInspectionTemplate({ id: record.id });
                actionRef.current.reload();
              },
            });
          }}
        >
          {record.state == '1' ? '' : '删除'}
        </a>,
        <a
          key="publishKey"
          onClick={async () => {
            if (record.state == '0' || record.state == undefined) {
              const res = record;
              res.state = '1';
              console.log(res);
              const result = await updateInspectionTemplate(res);
              if (result != null) {
                message.success('发布成功');
                actionRef.current.reload();
              }
            } else {
              const res = record;
              res.state = '0';
              console.log(res);
              const result = await updateInspectionTemplate(res);
              if (result != null) {
                message.success('取消发布成功');
                actionRef.current.reload();
              }
            }
          }}
        >
          {record.state == '1' ? '取消发布' : '发布'}
        </a>,
      ],
    },
  ];

  const items: tabType[] = [
    {
      key: '0',
      name: 'tab1',
      label: `检验表模板信息`,
      content: (
        <div style={{ height: 450 }}>
          <Form
            name="wrap"
            labelCol={{ flex: '110px' }}
            labelAlign="left"
            labelWrap
            form={form}
            wrapperCol={{ flex: 1 }}
            colon={false}
            validateTrigger={['onBlur', 'onChange']}
          >
            <Form.Item name="id" label="id" hidden={true}>
              <Input />
            </Form.Item>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  name="name"
                  label="模板名称"
                  rules={[{ required: true, message: '请输入模板名称!' }]}
                >
                  <Input disabled allowClear maxLength={20} showCount />
                </Form.Item>
              </Col>
              <Col span={12}>
                <Form.Item
                  name="type"
                  label="模板类型"
                  rules={[{ required: true, message: '请选择模板类型!' }]}
                >
                  <Select placeholder="请选择模板类型" options={thetype} disabled />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={12}>
                <Form.Item
                  label="柜体类型"
                  name="productType"
                  rules={[{ required: true, message: '请选择柜体类型!' }]}
                >
                  <Select
                    placeholder="请选择柜体类型"
                    onChange={(value, label) => {}}
                    options={optionsTypeDesc}
                    disabled
                  />
                </Form.Item>
              </Col>
              <Col span={12}>
                {/* <Form.Item
                  name="vision"
                  label="版本"
                  // hidden={true}
                  // rules={[{ required: true, message: '请输入版本!' }]}
                >
                  <Input disabled defaultValue={'1'}/>
                </Form.Item> */}
                <Form.Item
                  name="state"
                  label="运行状态"
                  // rules={[{ required: true, message: '请选择运行状态!' }]}
                >
                  <Select
                    disabled
                    options={[
                      { value: '1', label: '已发布' },
                      { value: '0', label: '未发布' },
                    ]}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              <Col span={24}>
                <Form.Item name="processName" label="工序" hidden={!isend}>
                  <Select
                    // disabled
                    placeholder="请选择工序"
                    onChange={(value) => {}}
                    options={optionsProcess}
                  />
                </Form.Item>
              </Col>
            </Row>
            <Row gutter={[50, 0]}>
              {/* <Col span={12}>
                <Form.Item name="isUse" label="模板是否在用">
                  <Select
                    options={[
                      { value: '1', label: 'YES' },
                      { value: '0', label: 'NO' },
                    ]}
                  />
                </Form.Item>
              </Col> */}
              <Col span={24}>
                <Form.Item name="memo" label="备注">
                  <Input />
                </Form.Item>
              </Col>
            </Row>
          </Form>
          <div style={{ width: 1100, textAlign: 'center' }}>
            <Button
              type="primary"
              onClick={() => {
                editSubmit();
              }}
            >
              确定
            </Button>
          </div>
        </div>
      ),
    },
    {
      key: '2',
      name: 'tab2',
      label: `自定义项目`,
      content: (
        <div
        // style={{ height: 500, padding: 0 }}
        >
          <InspectionTemplateMasterItem theid={id} />
        </div>
      ),
    },
    {
      key: '3',
      name: 'tab3',
      label: `检验项信息`,
      content: (
        <div
        // style={{ height: 500, padding: 0 }}
        >
          <TemplateInspectionItem theid={id} />
        </div>
      ),
    },
  ];

  // 新建模板
  const handleSubmit = async () => {
    setConfirmLoading(true);
    if (formTitle == '新建') {
      form
        .validateFields()
        .then(async () => {
          const res = form.getFieldsValue();
          console.log(res);
          // 模板名称查重
          const result_name = await getInspectionTemplateByNameAndProductType({
            name: res.name,
            productType: res.productType,
          });
          if (result_name.data == null) {
            if (res.type == '过程检验') {
              allProcess.filter((item: any) => {
                if (res.processName == item.processName) {
                  res.processCode = item.processCode;
                  res.processId = item.id;
                }
              });
              // 判重
              const process_name = await checkInspectionTemplateByProductAndProcess({
                processName: res.processName,
                productType: res.productType,
              });
              if (process_name.data == null) {
                res.state = 0;
                const result = await addInspectionTemplate(res);
                if (result != null) {
                  message.success('添加成功');
                  setConfirmLoading(false);
                  setModalVisit(false);
                  actionRef.current!.reload();
                }
              } else {
                message.warning('工序选择重复');
                setConfirmLoading(false);
              }
            } else {
              res.state = 0;
              const result = await addInspectionTemplate(res);
              if (result != null) {
                message.success('添加成功');
                setConfirmLoading(false);
                setModalVisit(false);
                actionRef.current!.reload();
              }
            }
          } else {
            message.warning('模板名称重复');
            setConfirmLoading(false);
          }
        })
        .catch(() => {
          setConfirmLoading(false);
        });
    }
  };

  //模板修改提交
  const editSubmit = async () => {
    form
      .validateFields()
      .then(async () => {
        const res = form.getFieldsValue();
        // 判重
        const para_ = await checkInspectionTemplateByProductAndProcess({
          processName: res.processName,
          productType: res.productType,
        });
        if (para_.data == null) {
          // 修改模板信息
          if (res.type == '过程检验') {
            allProcess.filter((item: any) => {
              if (res.processName == item.processName) {
                res.processCode = item.processCode;
                res.processId = item.id;
              }
            });
            const result = await updateInspectionTemplate(res);
            if (result != null) {
              message.success('修改成功');
              setConfirmLoading(false);
              setModalVisit(false);
              actionRef.current!.reload();
            }
          } else {
            const result = await updateInspectionTemplate(res);
            if (result != null) {
              message.success('修改成功');
              setConfirmLoading(false);
              setModalVisit(false);
              actionRef.current!.reload();
            }
          }
        } else {
          message.warning('工序选择重复');
          setConfirmLoading(false);
        }
      })
      .catch(() => {
        setConfirmLoading(false);
      });
  };

  // 对自定义项和检验表信息排序
  const bubbleSort = async (array: any) => {
    const len = array.length;
    if (len < 2) return array;
    for (let i = 0; i < len; i++) {
      for (let j = 0; j < i; j++) {
        if (array[j].sortId > array[i].sortId) {
          const temp = array[j];
          array[j] = array[i];
          array[i] = temp;
        }
      }
    }
    return array;
  };

  // 获取下拉框内容
  const getlist = async () => {
    // 类别
    const gettype = await getInspectionType(null);
    const typeOptionContract: any[] = [];
    gettype?.data.map((item: any) => {
      typeOptionContract.push({ value: item, label: item });
    });
    setthetype(typeOptionContract);
    // 获取柜体类型
    const getproduct = await getProductTypeList(null);
    const productOptionContract: any[] = [];
    getproduct.data.map((item: any, index: any) => {
      productOptionContract.push({ value: item, label: item });
    });
    setoptionsTypeDesc(productOptionContract);
    // 获取工序
    const getprocesslist = await getAllProcess(null);
    setallProcess(getprocesslist.data);
    const processOptionContract = [];
    getprocesslist.data.map((item: any, index: any) => {
      processOptionContract.push({ value: item.processName, label: item.processName });
    });
    setoptionsProcess(processOptionContract);
  };

  // 修改的modal改变
  const onChange = (key: string) => {};
  useEffect(() => {
    history.listen((location) => {
      setEditModalVisit(false);
    });
  }, [history]);

  //取消查看Modal的弹窗
  const handleCancel = () => {
    setModalVisit2(false);
  };

  return (
    <PageHeaderWrapper title={false} breadcrumb={undefined}>
      <ProTable
        headerTitle="检验模板查询"
        actionRef={actionRef} //用于触发刷新操作等，看api
        rowKey="id" //表格行 key 的取值，可以是字符串或一个函数
        formRef={ref}
        toolBarRender={(action, { selectedRows }) => [
          <Button
            key="button"
            icon={<PlusOutlined />}
            onClick={() => {
              setCreateOrUpdate(false);
              setFormTitle('新建');
              form.resetFields();
              setModalVisit(true);
            }}
            type="primary"
          >
            新建
          </Button>,
          // <Button
          //   key="button"
          //   icon={<PlusOutlined />}
          //   onClick={() => {
          //     const filters = filterTranNew(ref.current.getFieldsValue());
          //     exportInspectionTemplate({
          //       current: 1,
          //       pageSize: 5000,
          //       filters: filters,
          //     }).then((res) => {
          //       const aLink = document.createElement('a');
          //       document.body.appendChild(aLink);
          //       aLink.style.display = 'none';
          //       aLink.href = window.URL.createObjectURL(res);
          //       aLink.setAttribute('download', `InspectionTemplate.xlsx`);
          //       aLink.click();
          //       document.body.removeChild(aLink);
          //     });
          //   }}
          //   type="primary"
          // >
          //   导出
          // </Button>,
        ]}
        request={async (params = {}, sort, filter) => {
          const sorters = sortTran(sort);
          const filters = filterTranNew(params);
          const result = await getInspectionTemplateByPage({
            ...params,
            sorters: sorters,
            filters: filters,
          });
          getlist();
          // console.log(result.data.content);
          return {
            data: result.data.content,
            total: result.data.totalElements,
            success: result.success,
          };
        }}
        columns={columns}
        scroll={{ x: 1500, y: 350 }}
        rowSelection={{}}
      />
      <Modal
        title={formTitle}
        visible={modalVisit}
        onOk={handleSubmit}
        confirmLoading={confirmLoading}
        onCancel={() => setModalVisit(false)}
        width={980}
        destroyOnClose
      >
        <Form
          name="wrap"
          labelCol={{ flex: '110px' }}
          labelAlign="right"
          labelWrap
          form={form}
          wrapperCol={{ flex: 1 }}
          colon={false}
        >
          <Form.Item name="id" label="id" hidden={true}>
            <Input />
          </Form.Item>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                name="name"
                label="模板名称"
                rules={[{ required: true, message: '请输入模板名称!' }]}
              >
                <Input allowClear maxLength={20} showCount />
              </Form.Item>
            </Col>
            <Col span={12}>
              <Form.Item
                name="type"
                label="模板类型"
                rules={[{ required: true, message: '请选择模板类型!' }]}
              >
                <Select
                  placeholder="请选择模板类型"
                  options={thetype}
                  onChange={(value: any) => {
                    value == '过程检验' ? setisend(true) : setisend(false);
                    form.setFieldsValue({
                      processName: '',
                    });
                  }}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={12}>
              <Form.Item
                label="柜体类型"
                name="productType"
                rules={[{ required: true, message: '请选择柜体类型!' }]}
              >
                <Select
                  placeholder="请选择柜体类型"
                  onChange={(value, label) => {}}
                  options={optionsTypeDesc}
                />
              </Form.Item>
            </Col>
            <Col span={12}>
              {/* <Form.Item
              name="vision"
              label="版本"
              // hidden={true}
              // rules={[{ required: true, message: '请输入版本!' }]}
            >
              <Input disabled defaultValue={'1'}/>
            </Form.Item> */}
              <Form.Item
                name="state"
                label="运行状态"
                // rules={[{ required: true, message: '请选择运行状态!' }]}
              >
                <Select
                  disabled
                  defaultValue={'未发布'}
                  options={[
                    { value: '1', label: '已发布' },
                    { value: '0', label: '未发布' },
                  ]}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={24}>
              <Form.Item name="processName" label="工序" hidden={!isend}>
                <Select
                  placeholder="请选择工序"
                  onChange={(value) => {}}
                  options={optionsProcess}
                />
              </Form.Item>
            </Col>
          </Row>
          <Row gutter={[50, 0]}>
            <Col span={24}>
              <Form.Item name="memo" label="备注">
                <Input />
              </Form.Item>
            </Col>
          </Row>
        </Form>
      </Modal>
      <Modal
        title="检验表模板修改"
        width={1200}
        open={editModalVisit}
        onCancel={() => {
          setEditModalVisit(false);
          actionRef.current?.reload();
          setisend(false);
        }}
        onOk={() => {
          setEditModalVisit(false);
          setisend(false);
        }}
        footer={null}
        destroyOnClose
      >
        <Tabs
          defaultActiveKey="0"
          items={items.map((item, i) => {
            const id = String(i + 1);
            return {
              label: item.label,
              key: id,
              children: <div>{item.content}</div>,
            };
          })}
          onChange={onChange}
        />
      </Modal>
      <Modal
        title="模板管理-检验单预览"
        visible={modalVisit2}
        onCancel={handleCancel}
        footer={[
          <Button key="back" onClick={() => handleCancel()}>
            关闭
          </Button>,
        ]}
        width={1100}
        destroyOnClose
      >
        {/* 模板预览 */}
        <div className="templatebox">
          <div className="pdName">{thetitle}</div>
          <div className="company">
            <div className="company_name">电柜管家</div>
            <div className="triangle"></div>
            <ul className="title_list">
              {thehead.map((item, index) => {
                if (index + 1 == thehead.length) {
                  return <li key={index}>{item?.name + ': ***'}</li>;
                } else {
                  return <li key={index}>{item?.name + ': ***' + ' ' + '|' + ' '}</li>;
                }
              })}
            </ul>
          </div>
          <ul className="list">
            {theitem.map((item, index) => {
              if (item?.optionType == '单选') {
                let selectOption = item?.rightOption.split('|');
                if (item?.isDetailDes == '1') {
                  //有描述框
                  return (
                    <li key={index} className="list_item">
                      <div className="question_wrapper">
                        <div className="title">
                          {index + 1}|{item?.itemName}
                          {item?.inspectionMethod != undefined && item?.inspectionMethod != ''
                            ? ':（' + item?.inspectionMethod + '）'
                            : ''}
                        </div>
                        <div className="templatecontent">
                          <Input className="detailinput" placeholder={'请输入描述内容'} />
                        </div>
                      </div>
                      <div className="radio_wrapper">
                        <Radio.Group options={selectOption} />
                      </div>
                    </li>
                  );
                } else {
                  return (
                    <li key={index} className="list_item">
                      <div className="question_wrapper">
                        <div className="title">
                          {index + 1}|{item?.itemName}
                          {item?.inspectionMethod != undefined && item?.inspectionMethod != ''
                            ? ':（' + item?.inspectionMethod + '）'
                            : ''}
                        </div>
                      </div>
                      <div className="radio_wrapper">
                        <Radio.Group options={selectOption} />
                      </div>
                    </li>
                  );
                }
              } else if (item?.optionType == '多选') {
                let thedescOption = item?.descOption.split('|');
                if (item?.isExtendDes == '1') {
                  return (
                    <li key={index} className="list_item">
                      <div className="question_wrapper">
                        <div className="title">
                          {index + 1}|{item?.itemName}
                          {item?.inspectionMethod != undefined && item?.inspectionMethod != ''
                            ? ':（' + item?.inspectionMethod + '）'
                            : ''}
                        </div>
                        <div className="templatecontent">
                          <Checkbox.Group options={thedescOption} />
                          <div className="other">
                            <div>
                              <span>*</span>如果没有合适选项，请文字描述:
                            </div>
                            <Input className="detailinput" placeholder={'请输入描述内容'} />
                          </div>
                        </div>
                      </div>
                    </li>
                  );
                } else {
                  return (
                    <li key={index} className="list_item">
                      <div className="question_wrapper">
                        <div className="title">
                          {index + 1}|{item?.itemName}
                          {item?.inspectionMethod != undefined && item?.inspectionMethod != ''
                            ? ':（' + item?.inspectionMethod + '）'
                            : ''}
                        </div>
                        <div className="templatecontent">
                          <Checkbox.Group options={thedescOption} />
                        </div>
                      </div>
                    </li>
                  );
                }
              } else if (item?.optionType == '描述') {
                return (
                  <li key={index} className="list_item">
                    <div className="question_wrapper">
                      <div className="title">
                        {index + 1}|{item?.itemName}
                        {item?.inspectionMethod != undefined && item?.inspectionMethod != ''
                          ? ':（' + item?.inspectionMethod + '）'
                          : ''}
                      </div>
                      <div className="templatecontent">
                        <TextArea rows={3} className="detailinput" placeholder={'请输入描述内容'} />
                        {/* <Input placeholder={'请输入描述内容'}/> */}
                      </div>
                    </div>
                  </li>
                );
              } else {
                return (
                  <li key={index} className="list_item">
                    <div className="question_wrapper">
                      <div className="title">
                        {index + 1}|{item?.itemName}
                        {item?.inspectionMethod != undefined && item?.inspectionMethod != ''
                          ? ':（' + item?.inspectionMethod + '）'
                          : ''}
                      </div>
                      <div className="templatecontent">
                        <Input className="detailinput" placeholder={'请输入填空内容'} />
                      </div>
                    </div>
                  </li>
                );
              }
            })}
          </ul>
        </div>
      </Modal>
    </PageHeaderWrapper>
  );
};
export default InspectionTemplate;
